<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试语法解析</title>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
     .dinput{
        height: 68px;
        font-size: 40px;
        line-height: 68px;
     }
    </style>
</head>
<body class="container">
    <div class="page-header">
        <h1>瞎捣鼓的语法规则 <small>用于简单场景的描述</small><small><a href="#desc">一览表</a></small></h1>
    </div>
    <div class="panel panel-success">
        <div class="panel-heading">
            <h3 class="panel-title">REPL</h3>
        </div>
        <div class="panel-body">
            <div class="form-group">
                <label for="exampleInputEmail1">输入</label>
                <input input-d type="text"
                       class="form-control dinput"
                       value="函数名字 '字符串参数"
                       d-keyup="val this|>parser|>tojson|>htmlel [output]"
                       placeholder="输入语法">
            </div>
            <div class="form-group">
                <label for="exampleInputEmail1">输出</label>
                <pre output> </pre>
            </div>
        </div>
    </div>
    <table class="table table-striped" id="desc">
        <tr>
            <th>一览表</th>
            <th>基本元素</th>
            <th>demo</th>
        </tr>
        <tr>
            <td>
                <button type="button" class="btn btn-info"
                        d-click="setVal [code=number] [input-d]|>trigger 'keyup|>scrollTop">尝试一下</button>
            </td>
            <td>数字</td>
            <td code="number"><code>fn1 1 2 3 4 1.2 1e10</code></td>
        </tr>
        <tr>
            <td>
                <button type="button" class="btn btn-info" d-click="setVal [code=str] [input-d]|>trigger 'keyup|>scrollTop">尝试一下</button>
            </td>
            <td>字符串</td>
            <td code="str"><code>fn1 'str</code></td>
        </tr>
        <tr>
            <td>
                <button type="button" class="btn btn-info" d-click="setVal [code=arr] [input-d]|>trigger 'keyup|>scrollTop">尝试一下</button>
            </td>
            <td>数组</td>
            <td code="arr"><code>fn1 '(1 2 'str '(4 '5))</code></td>
        </tr>
        <tr>
            <td>
                <button type="button" class="btn btn-info" d-click="setVal [code=bool] [input-d]|>trigger 'keyup|>scrollTop">尝试一下</button>
            </td>
            <td>布尔值,空值</td>
            <td code="bool"><code>fn1 true false null</code></td>
        </tr>
        <tr>
            <td>
                <button type="button" class="btn btn-info" d-click="setVal [code=pipe] [input-d]|>trigger 'keyup|>scrollTop">尝试一下</button>
            </td>
            <td>函数组合,其它类型</td>
            <td code="pipe"><code>fn1 true false null|>fn2 'strdddd .panel,h3</code></td>
        </tr>
    </table>
    <div class="alert alert-warning" role="alert">
        <p>
            <span class="label label-warning">警告</span>
            语法只能用一行表示,不能有换行

        </p>
        <p>
            <span class="label label-warning">警告</span>
            字符串不能有空格<small>因为这里的字符串严格来说应该叫关键字 只用来做标识作用</small>

        </p>
    </div>
    <blockquote>
        <p>采用100个函数在一种数据结构上操作，远远优于用10个函数在10个数据结构上操作.</p>
        <footer>作者应该是<cite title="Source Title">Alan Perlis</cite></footer>
    </blockquote>
    <script src="http://cdn.jsdelivr.net/ramda/latest/ramda.min.js"></script>
    <script src="./d-lange-engine.js"></script>
    <script src="./d-pipe.js"></script>
    <script src="http://cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.js"></script>
    <script type="text/javascript">
     dpipe.dpipe($("body"),{
         val:function(el){
             return el.val()
         },
         tojson:function(obj){
             return JSON.stringify(obj,null,4);
         },
         parser:function(str){
             try{
             return dlang.parserWithPipe(str);
             }catch(e){
                 return e;
             }
         },
         htmlel:function(el,str){
             return el.text(str);
         },
         setVal:function(el1,el){
             return el.val(el1.text());
         },
         trigger:function(ename,el){
             return el.trigger(ename);
         },
         scrollTop:function(a){
             window.scrollTo(0,0);
             return a;
         }
     });
     $("[input-d]").trigger("keyup");
    </script>
</body>
</html>
